<template>
	<view class="rare-book-container">
		<u-sticky bgColor="#fff">
		    <u-tabs
			:scrollable="false"
			:current="current"
			@change="tabsChange"
			lineWidth="30"
			lineColor="#ae87d8"
			:activeStyle="{
				color: '#ae87d8',
				fontWeight: 'bold',
				transform: 'scale(1.05)'
			}"
			:inactiveStyle="{
				color: '#606266',
				transform: 'scale(1)'
			}"
			 itemStyle=" height: 50px;width:250rpx;"
			 :list="list1"></u-tabs>
		</u-sticky>
		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="content">
				<view class="video"  v-if="current==0">
					<view class="li" v-for="(item,index) in goodsList" :key="index">
						<view class="v-title">{{item.title}}</view>
						<view class="v-time">{{item.time}}</view>
						<view class="video-box">
							<video
							style="width:100%;height:300rpx;"
							id="myVideo" 
							object-fit="contain" 
							:src="item.src"
							 @error="videoErrorCallback" 
							 :autoplay="false"
							controls :poster="item.thumb"></video>
						</view>
					</view>
					
				</view>
				<view class="model" v-if="current==1">
					<view class="model-box flex-box" 
					v-for="(item,index) in goodsList" :key="index" :data-src="item.src"
						@tap="audioPlay(index)">
						<image :src="comm_img_url+'/classroom/play.png'" class="play" v-if="item.status"></image>
						<image :src="comm_img_url+'/classroom/suspend.png'" class="play" v-else></image>
						<view class="box-1">
							<view class="one_ell">{{item.text}}</view>
							<view class="time">{{item.time}}</view>
						</view>
						<image :src="comm_img_url+'/classroom/sound.png'" class="sound" v-if="item.status"></image>
						<image :src="comm_img_url+'/classroom/sound.gif'" class="sound" v-else></image>
					</view>
				</view>
				<view class="model waterfall" v-if="current==2">
					<view class="model-box waterfall-box flex-box">
						<image mode="widthFix" class="waterfall-item" v-for="(item,index) in goodsList" :key="index"
							 :src="item" @tap="browse(item,index)"></image>
					</view>
				</view>
		<!-- 		<extensionItem ref="mescrollItem0" :getId="tab" :isShow="0" v-if="isShow==0"></extensionItem>
				<extensionItem ref="mescrollItem1" :getId="tab" :isShow="1" v-if="isShow==1"></extensionItem> -->
			 </view>
		 </mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import extensionItem from './extension-item.vue';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components:{
			extensionItem
		},
		data() {
			return {
				comm_img_url:'',
				classfiy: [],
				isShow: -1,
				tab:0,
				page:1,
				current:2,
				list1: [
					{
						name: '视频专区',
					}, 
					{
						name: '音频专区',
					},
					{
						name: '海报专区',
					},
				],
				goodsList:[],
				pageSize:10,
				currentAudioIndex: -1,
				innerAudioContext: uni.createInnerAudioContext(),
			};
		},
		onHide() {
			if(this.isShow ==1){
				this.$refs.mescrollItem1.pauseAudio()
			}
		},
		onUnload() {
			if(this.isShow ==1){
				this.$refs.mescrollItem1.pauseAudio()
			}
		},
		onLoad(option) {
			this.comm_img_url = this.$c.appImg
			//动态修改状态栏的颜色
			uni.setNavigationBarColor({
				frontColor:"#ffffff",
				backgroundColor:"#ae87d8"
			})
		},
		methods: {
			browse(e,index) {
				
				
				var imglist = [];
				this.goodsList.forEach((item, index) => {
					imglist.push(item);
				})
			
				uni.previewImage({
					current: index,
					urls: imglist
				})
			},
			audioPlay(index) {
				var _myself = this.goodsList[index];
				if (this.currentAudioIndex == index) {
					_myself.status ? this.innerAudioContext.play() : this.innerAudioContext.stop();
				} else {
					this.innerAudioContext.stop();
					this.innerAudioContext.src = _myself.src;
					this.goodsList.forEach(element => {
						element.status = true;
					});
					this.innerAudioContext.play();
				}
				_myself.status = !_myself.status;
				this.currentAudioIndex = index;
				this.innerAudioContext.onEnded(e => {
					this.goodsList[this.currentAudioIndex].status = true;
				})
			},
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			/*下拉刷新的回调, 有三种处理方式:*/
			  downCallback(){
			    this.mescroll.endSuccess();
			  },
			  /*上拉加载的回调*/
			  upCallback(page) {
				  let _this = this
			    //联网加载数据
			    this.$u.api.souceIndex({page:this.page,tab:this.current+1}).then(res=>{
					  console.log(res,'商品列表')
			    	//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
			    	//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
			    
			    	//方法一(推荐): 后台接口有返回列表的总页数 totalPage
			    	this.mescroll.endByPage(this.pageSize, res.msg.totalPage); //必传参数(当前页的数据个数, 总页数)
			    
			    	//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
			    	//this.mescroll.endBySize(res.list.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
			    
			    	//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
			    	// this.mescroll.endSuccess(res.msg.length, false); //必传参数(当前页的数据个数, 是否有下一页true/false)
			      
			    	//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
			    	// this.mescroll.endSuccess(res.list.length);
					if(_this.page == 1){_this.goodsList = [];} //如果是第一页需手动制空列表
					_this.goodsList =  _this.goodsList.concat(res.msg.list); //如果是第一页需手动制空列表
					return false
			    // 	//设置列表数据
			//     	if(this.page == 1||this.page<res.msg.totalPage){
					// 	this.goodsList =  res.msg.list; //如果是第一页需手动制空列表
					// }else{
					// 	this.goodsList = this.goodsList.concat(res.msg.list); // 注意不是this.msgList.concat
					// }
			    }).catch(()=>{
			    	//联网失败, 结束加载
			    	this.mescroll.endErr();
			    })
			  },
			tabsChange(item) {
				this.current = item.index;
				this.page = 1
				console.log(this.current,'12222')
				this.upCallback(this.page,this.current)
			},
			classfiyGetData(option,index) {
				this.tab = option
				this.isShow = index
				//#ifdef APP-PLUS
				this.$nextTick(()=>{
					if(this.isShow==1){
						this.$refs.mescrollItem1.downCallback()
					}else{
						this.$refs.mescrollItem0.downCallback()
					}
				})
				//#endif
			}
		}
	}
</script>

<style lang="less">
	// @import url("@/common/css/comm.less");
	.video{
		.li{
			background:#fff;
			margin-bottom:20rpx;
			padding:30rpx;
			.v-title{
				font-size:30rpx;
				margin-bottom:10rpx;
			}
			.v-time{
				font-size:24rpx;
				color:#aaa;
				margin-bottom:20rpx;
			}
			.video-box{
				width:100%;
				height:300rpx;
			}
		}
	}
	.model {
		.waterfall-box{
			justify-content:space-between;
			flex-wrap: wrap;
			.waterfall-item{
				width:330rpx;
				height:330rpx;
			}
		}
		.model-box {
			background:#fff;
			width: 750rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;
			box-sizing: border-box;
	
			text {
				display: block;
			}
		}
	
		.one_ell {
			font-size:32rpx;
			margin-bottom:20rpx;
		}
	
		.time {
			font-size:26rpx;
			color:#ccc;
		}
	
		.waterfall-item {
			width: 100%;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
		}
	
		.play {
			width: 58rpx;
			height: 58rpx;
			display: block;
			margin-right: 30rpx;
		}
	
		.sound {
			width: 58rpx;
			height: 58rpx;
			margin-left: 30rpx;
		}
	}
	.rare-book-container {
		font-size:28rpx;
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.title-box {
		background:#fff;
		padding: 20rpx;
		text-align: center;
		.box-1 {
			i {
				display: block;
				width: 68rpx;
				height: 2rpx;
				margin: 10rpx auto 0;
				background:transparent;
			}
		}

		.action {
			

			i {
				
			}
		}
	}

	.content {
		margin-top: 20rpx;
		flex:1;
		overflow: auto;
	}
</style>
